<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font-size: 14px;
        }

        ul {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: #000;
        }

        #wrap {
            position: relative;
            top: 0px;
            width: 876px;
            height: 34px;
            line-height: 34px;
            margin: 0 auto;
        }

        #menu li {
            float: left;
            display: block;
            width: 92px;
            height: 37px;
            line-height: 37px;
            text-align: center;
            margin-right: 2px
        }

        #menu li a:link {
            display: block;
            background: #EDEBEC;
            font-size: 14px;
            color: #333;
            width: 92px;
            height: 37px;
            line-height: 37px;
        }

        #menu li a:hover {
            background: red;
            color: white
        }

        #menu li ul {
            position: absolute;
            top: 37px;
            width: 90px;
            display: none;
            border: 1px solid #ce070e;
            border-top: none;
            background: #fff;
        }

        #menu li ul li {
            float: left;
            width: 90px;
            height: 37px;
            line-height: 37px;
        }

        #menu li ul li a:link {
            width: 90px;
            height: 37px;
            line-height: 37px;
        }

        #menu li ul li a:hover {
            color: white;
            text-decoration: none;
        }
    </style>
    <script type="text/javascript" src="assets/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#menu>li:has(ul)").hover(
                function () {
                    $(this).find('ul').slideDown(500);
                },
                function () {
                    $(this).find('ul').slideUp(500);
                }
            );
        });
    </script>
</head>

<body>
    <div id="wrap">
        <ul id="menu">
            <li><a href="#">网站首页</a></li>
            <li><a href="#">最新动态页</a>
                <ul>
                    <li><a href="#">源码爱好者</a></li>
                    <li><a href="#">编程导航</a></li>
                    <li><a href="#">网页特效</a></li>
                </ul>
            </li>
            <li><a href="#">产品预订</a></li>
            <li><a href="#">帮助查询</a>
                <ul>
                    <li><a href="#">时速快递</a></li>
                    <li><a href="#">太空一号</a></li>
                    <li><a href="#">蜘蛛侠前传</a></li>
                    <li><a href="#">未来战士</a></li>
                    <li><a href="#">蟒蛇之灾</a></li>
                </ul>
            </li>
            <li><a href="#">会员俱乐部</a></li>
            <li><a href="#">凯撒论坛</a></li>
        </ul>
    </div>
</body>

</html>